<template>
  <!-- 项目实施 - 6变更控制 - tab4终止-->
  <div class="change-control-tab4">
    <el-row :gutter="20">
      <el-col :span="24" style="margin-top:16px;">
        <el-form :model="formData" label-position="right" label-width="90px">
          <el-row :gutter="12">
            <el-col :span="16" v-if="showSearch == false">
              <advancedFilter></advancedFilter>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="项目名称">
                <el-input v-model="formData.ipt1" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="任务名称">
                <el-input v-model="formData.ipt2" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="计划开始">
                <el-date-picker
                  v-model="formData.date1"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width:100%"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="计划完成">
                <el-date-picker
                  v-model="formData.date2"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width:100%"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="showSearch ? 24 : 8" style="text-align: right;">
              <el-button type="primary">筛选</el-button>
              <el-button @click="resetForm">重置</el-button>
              <el-button type="text" @click="changeSearch"> {{showSearch===true ? '高级筛选' : '普通筛选'}} </el-button>
            </el-col>
            <el-col :span="24">
              <el-button @click="showModal('btnModal')" type="primary" plain> 终止申请 </el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24" style="margin-top:16px;">
        <cust-act-table
          ref="custActTable"
          tableType=""
          :list="tableData"
          :colConfigs="customColumns"
          @changePage="changePage"
          @getSelectedRow="showModal('table')"
          :pageNum="page.pageNum"
          :pageSize="page.pageSize"
          :total="page.total"
          showIdx
          :showAct="false"
          rKey="index"
        ></cust-act-table>
      </el-col>
    </el-row>
    <!-- 点击按钮弹窗 -->
    <el-dialog title="终止申请" class="btn-modal" :visible.sync="btnModal" @close="closeModal('btnModal')" width="1200px" style="margin-top:6vh;" :close-on-click-modal="false">
      <detailModal :tabList="detailModalInfo.tabList" :modalImgs="detailModalInfo.imgs" :formDetailTitle="detailModalInfo.formDetailTitle" :formDetail="detailModalInfo.formList" :formData="detailModalInfo.doc" :rTabData="detailModalInfo.rTabData" menuType="终止申请"></detailModal>
    </el-dialog>
    <!-- 点击列表弹窗 -->
    <el-dialog title="查看" class="table-modal" :visible.sync="tableModalState" @close="closeModal('table')" width="940px" :close-on-click-modal="false">
      <modalBtns modalType="table"></modalBtns>
      <formName text="任务档案"></formName>
      <div class="form-content">
        <formPart listTitle="基本信息" @clickModalBtn="showNextLevelModal" ref="info1" modalTitle="modalDetail" :formList="formInfo.info1"></formPart>
        <formPart listTitle="进度信息" @clickModalBtn="showNextLevelModal" ref="info2" modalTitle="modalDetail" :formList="formInfo.info2"></formPart>
        <formPart listTitle="项目信息" ref="info3" modalTitle="modalDetail" :formList="formInfo.info3"></formPart>
      </div>
    </el-dialog>
    <!-- 前置任务 -->
    <el-dialog class="pre-task-modal" title="前置任务查询" :visible.sync="preTaskModalState" @close="closeModal('preTaskModal')"  width="1000px" :close-on-click-modal="false">
      <cust-act-table
        ref="preTaskModalTable"
        tableType=""
        :list="preTaskData"
        :colConfigs="preTaskCol"
        @changePage="preTaskModalTablePage"
        :pageNum="preTaskModalPage.pageNum"
        :pageSize="preTaskModalPage.pageSize"
        :total="preTaskModalPage.total"
        :showIdx="false"
        :showAct="false"
        rKey="index"
      ></cust-act-table>
    </el-dialog>
    <!-- 工作报告 -->
    <el-dialog class="work-modal" title="任务工作进度报告查询" :visible.sync="workModalState" @close="closeModal('workModal')" width="1000px" :close-on-click-modal="false">
      <cust-act-table
        ref="workModalTable"
        tableType=""
        :list="workModalData"
        :colConfigs="workModalCol"
        @changePage="workModalTablePage"
        @getSelectedRow="showModal('workModal2')"
        :pageNum="workModalPage.pageNum"
        :pageSize="workModalPage.pageSize"
        :total="workModalPage.total"
        :showIdx="false"
        :showAct="false"
        rKey="index"
      ></cust-act-table>
    </el-dialog>
    <!-- 工作报告二级弹窗 -->
    <el-dialog class="work-modal" title="查询穿透显示" :visible.sync="workModalState2" @close="closeModal('workModal2')" width="1000px" :close-on-click-modal="false">
      <formName text="工作报告档案"></formName>
      <div class="form-content">
        <formPart :showListTitle="false" ref="info1" modalTitle="modalDetail" :formList="workModalDetail.info1"></formPart>
        <formPart listTitle="基本信息" ref="info2" modalTitle="modalDetail" :formList="workModalDetail.info2"></formPart>
        <formPart listTitle="任务进度" ref="info3" modalTitle="TAB-TABLE-NOACT" :formList="workModalDetail.info3"></formPart>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import formName from '../../components/formName';
import formPart from '../../components/formPart';
import modalBtns from '../../components/modalBtns';
import detailModal from '../../components/detailModal';
import custActTable from "../../components/custActTable.vue";
import advancedFilter from '../../components/advancedFilter';
import { tableData6, customColumns6, preTaskData, preTaskCol, workModalData, workModalCol, workModalDetail } from '../../js/staticData';
export default {
  name: "changeControlTab4",
  components: {custActTable, advancedFilter, detailModal, modalBtns, formName, formPart},
  data() {
    return {
      formData: {
        ipt1: '',
        ipt2: '',
        date1: '',
        date2: '',
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      tableData: tableData6[3],
      customColumns: customColumns6[3],
      preTaskCol: preTaskCol,
      preTaskData: preTaskData,
      workModalCol: workModalCol,
      workModalData: workModalData,
      workModalDetail: workModalDetail,
      showSearch: true,
      btnModal: false,
      preTaskModalState: false, // 前置任务弹窗
      workModalState: false, // 工作报告弹窗
      workModalState2: false, // 工作报告二级弹窗
      tableModalState: false, // 列表详情弹窗
      modalType: '',
      formInfo: {
        info1: [
          { l: '任务名称', v: '三北六期绿化改造', span: 12 },
          { l: '任务模式', v: '自动', span: 6 },
          { l: '任务状态', v: '待办', span: 6 },
          { l: '任务序号', v: '12', span: 6 },
          { l: '负责人', v: '朱冠', span: 6 },
          { l: '负责人部门', v: 'XX部门', span: 6 },
          { l: '里程碑', v: '', span: 3, type: 'checkBox', checked: false },
          { l: '', v: '前置任务', span: 3, type: 'noLabelRoundButton', openModal: 'preTaskModal' },
          { l: 'web标识', v: 'test', span: 6 },
          { l: '标记关键任务', v: '', span: 6, type: 'checkBox', checked: false },
          { l: '计算出关键任务', v: '', span: 6, type: 'checkBox', checked: false },
          { l: '审批完成', v: '', span: 6, type: 'checkBox', checked: true },
          { l: '任务备注', v: '', span: 12 },
          { l: '限制类型', v: '越快越好', span: 6 },
          { l: '限制日期', v: '2024-07-26', span: 6 },
          { l: '需提交成果', v: '', span: 12 },
          { l: '成果文件', v: '', span: 12 },
          { l: '父任务名称', v: '', span: 12 },
          { l: '固定日期', v: '否', span: 6 },
          { l: '是否父任务', v: '', span: 6 }
        ],
        info2: [
          { l: '计划工期', v: '3 天(自然日)', span: 6 },
          { l: '计划开始', v: '2024-07-28', span: 6 },
          { l: '计划完成', v: '2024-07-31', span: 6 },
          { l: '完成进度', v: '80 %', span: 3 },
          { l: '', v: '工作报告', span: 3, type: 'noLabelRoundButton', openModal: 'workModal' },
          { l: '实际工期', v: '1 天(自然日)', span: 6 },
          { l: '实际开始', v: '', span: 6 },
          { l: '实际完成', v: '', span: 6 },
          { l: '', v: '80', span: 6, type: 'noLabelProgress' },
        ],
        info3: [
          { l: '所属项目', v: 'XX有限责任公司系统建设', span: 12 },
          { l: '项目编号', v: 'GC2022010001', span: 6 },
          { l: '项目状态', v: '执行', span: 6 }
        ]
      },
      page: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      preTaskModalPage: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      workModalPage: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      detailModalInfo: {
        formDetailTitle: '终止申请',
        formList: [
          {
            title: '',
            modalTitle: 'EDIT-FORM',
            list: [
              { l: '申请人', v: '朱冠', span: 6 },
              { l: '申请日期', v: '2024-07-30', type: 'datePicker', span: 6 },
              { l: '申请部门', v: 'XX部门', span: 6 },
              { l: '№', v: '', span: 6 },
              { l: '申请单位', v: 'XX发展集团有限公司', span: 24 }
            ]
          },
          {
            title: '基本信息',
            modalTitle: 'EDIT-FORM',
            list: [
              { l: '项目名称', v: '', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 12 },
              { l: '负责人', v: '', span: 6 },
              { l: '变更范围', v: '1', type: 'checkGroup', list: [{l:'项目', v:'0', checked: false, disabled: false},{l:'任务', v:'1', checked: true, disabled: false}], span: 6 },
              { l: '备注', v: '', type: 'input', span: 12 },
              { l: '相关附件', v: '', span: 12, type: 'inputIconR', span: 12, icon: { path:require('../../images/modal-icon2.png'), width: '14px', height: '16px'} }
            ]
          },
          {
            title: '任务信息',
            modalTitle: 'EDIT-TABLE',
            list: [
              {
                btns: ['新建', '多选任务', '删除', '删除全部'],
                tableCol: [
                  { label: '任务名称', prop: 'rwmc', slot: 'inputIconR', type: 'inputIconR', icon: { path:require('../../images/modal-icon3.png'), width: '16px', height: '16px'}, width: 150 },
                  { label: '负责人', prop: 'fzr' },
                  { label: '里程碑', prop: 'lcb', slot: 'lcbCheckbox', type: 'checkBox', checked: false, disabled: true },
                  { label: '计划开始日期', prop: 'ksrq' },
                  { label: '计划完成日期', prop: 'wcrq' },
                  { label: '完成比', prop: 'wcb' }
                ],
                tableData: [
                  {
                    rwmc: '',
                    fzr: '',
                    lcb: '',
                    ksrq: '',
                    wcrq: '',
                    wcb: ' %'
                  }
                ],
                page: {
                  pageNum: 1, // 当前页
                  pageSize: 10, // 每页条数
                  total: 0 // 总条数
                }
              }
            ]
          }
        ],
        tabList: [
          {
            label: "智能校验",
            value: "1",
            img: require('../../images/icon-tab-rt-2.png'),
            active: require('../../images/icon-tab-rt-active-2.png')
          }, {
            label: "流程预测",
            value: "4",
            img: require('../../images/icon-tab-rt-4.png'),
            active: require('../../images/icon-tab-rt-active-4.png')
          }, {
            label: "相关数据",
            value: "5",
            img: require('../../images/icon-tab-rt-5.png'),
            active: require('../../images/icon-tab-rt-active-5.png')
          }
        ],
        imgs: {
          contentImgTitle: "终止申请",
          img1: require('../../images/tgsq-form-modal-bg2.png'), // 查看流程
          img2: require('../../images/tgsq-form-modal-bg2-2.png'), // 查看流程泳道框图
          img3:  [{
            num1: '0',
            num2: '5分',
            dateTime: '2024-08-09 15:44:55',
            status: 'finished',
            list: [{
              name: '发起者',
              role: '协同',
              opinion: '已阅',
              handler: '凌焘',
              handleTime: '',
              handleTime: '2024-08-09 15:44:55',
              investTime: '5分'
            }]
          }], // 流程预测
        },
        doc: {
          name: `终止申请-{项目名称}-{申请日期}`,
          flow: `凌焘(协同)`
        },
        rTabData: [
          {
            label: '智能校验',
            info: [ // state: 1.不通过 2.警示 3.通过
              {l: '项目名称字段为空', state: 1, v: '不通过'},
              {l: '任务名称字段为空', state: 1, v: '不通过'},
              {l: '备注字段为空', state: 1, v: '不通过'},
              {l: '您填写的内容存在错误，请查看提示信息后修改。', state: 3, v: '通过'}
            ]
          }, {
            label: '流程预测',
            info: [{
              num1: '0',
              num2: '5分',
              dateTime: '2024-08-09 15:44:55',
              status: 'finished',
              list: [{
                name: '发起者',
                role: '协同',
                opinion: '已阅',
                handler: '凌焘',
                handleTime: '',
                handleTime: '2024-08-09 15:44:55',
                investTime: '5分'
              }]
            }]
          }, {
            label: '相关数据',
            info: [
              {
                text: `林木废弃物新型地板材研发终止申请-2024-07-11`,
                img: require('../../images/icon-doc.png')
              }, {
                text: `风光一体化防沙治沙终止申请-2024-07-11`,
                img: require('../../images/icon-doc.png')
              }
            ]
          }
        ]
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.tableData = tableData6[3];
      this.customColumns = customColumns6[3];
    })
  },
  methods: {
    /**
     * @author Wrl
     * 点击弹窗内部按钮
     */
    showNextLevelModal(val) {
      this.showModal(val);
    },
    /**
     * @author Wrl
     * 重置查询条件
     */
    resetForm() {
      this.formData = {};
    },
    /**
     * @author Wrl
     * 切换查询条件
     */
    changeSearch() {
      this.showSearch = !this.showSearch
    },
    /**
     * @author Wrl
     * 显示弹窗
     */
    showModal(type) {
      this.modalType = type;
      if(this.modalType == 'btnModal') {
        this.btnModal = true;
      } else if(this.modalType == 'table') {
        this.tableModalState = true;
      } else if(type == 'preTaskModal') {
        this.preTaskModalState = true;
      } else if(type == 'workModal') {
        this.workModalState = true;
      } else if(type == 'workModal2') {
        this.workModalState2 = true;
      }
    },
    /**
     * @author Wrl
     * 关闭弹窗
     */
    closeModal(type) {
      if(type == 'btnModal') {
        this.btnModal = false;
      } else if(type == 'table') {
        this.tableModalState = false;
      } else if(type == 'preTaskModal') {
        this.preTaskModalState = false;
      } else if(type == 'workModal') {
        this.workModalState = false;
      } else if(type == 'workModal2') {
        this.workModalState2 = false;
      }
    },
		/**
		 * @author Wrl
		 * 获取分页信息
		 */
		changePage(page) {
			this.page.pageNum = page.pageNum; // 当前页
			this.page.pageSize = page.pageSize; // 每页条数
			this.page.total = page.total; // 总数
		},
    /**
     * @author Wrl
     * 前置任务弹窗列表分页
     */
    preTaskModalTablePage(page) {
			this.preTaskModalPage.pageNum = page.pageNum; // 当前页
			this.preTaskModalPage.pageSize = page.pageSize; // 每页条数
			this.preTaskModalPage.total = page.total; // 总数
		},
    /**
     * @author Wrl
     * 工作报告弹窗列表分页
     */
    workModalTablePage(page) {
			this.workModalPage.pageNum = page.pageNum; // 当前页
			this.workModalPage.pageSize = page.pageSize; // 每页条数
			this.workModalPage.total = page.total; // 总数
		},
  }
};
</script>

<style lang="scss" scoped>
  .change-control-tab4 {
    ::v-deep {
      .el-range-input,
      .el-range-separator {
        font-size: 12px;
      }
      .el-range-editor--medium.el-input__inner {
        padding: 3px 0 3px 5px;
      }
      .btn-modal .el-dialog__header {
        padding-top: 20px;
      }
      .btn-modal .el-dialog__body {
        padding: 5px;
        background: #eeeeee;
      }
      .flow-modal .el-dialog__header {
        padding-top: 20px;
      }
      .flow-modal .el-dialog__body {
        background: #ffffff;
      }
      .table-modal .el-dialog__body {
        padding: 0px 20px 20px;
      }
      .next-level-modal .el-dialog__body {
        padding: 0px 20px 20px;
        text-align: center;
      }
      ::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
      .task-table-modal-btn-top {
        top: 200px !important;
        right: 0px !important;
      }
      .task-table-modal-btn-bottom {
        right: 0px !important;
      }
    }
  }
</style>